<template>
  <div>
    <el-form :inline="true">
      <el-form-item>
        <el-button type="primary" @click="addSeries">{{ $t('add') }}</el-button>
      </el-form-item>
    </el-form>
    <div class="uni-scroll" style="height: calc(100vh - 220px)">
      <el-table
        :data="seriesList"
        style="width: 100%;"
      >
        <el-table-column :label="$t('view')" >
          <template slot-scope="scope">
            <el-input
              v-model="scope.row.viewSign"
            />
          </template>
        </el-table-column>
        <el-table-column :label="$t('name')" >
          <template slot-scope="scope">
            <el-input
              v-model="scope.row.name"
              :disabled="!scope.row.isAdd"
            />
          </template>
        </el-table-column>
        <el-table-column :label="$t('keyName')" >
          <template slot-scope="scope">
            <el-input
              v-model="scope.row.keyName"
              :disabled="!scope.row.isAdd"
            />
          </template>
        </el-table-column>
        <el-table-column >
          <template slot-scope="scope">
            <el-button
              v-if="!scope.row.isAdd"
              type="text"
              icon="el-icon-edit"
              @click="dictionaries(scope.row)"
            >{{ $t('dictionaries') }}
            </el-button>
            <el-button
              type="text"
              icon="el-icon-edit"
              @click="addOrUpdateProductSeries(scope.row)"
            >{{ $t('save') }}</el-button>
            <el-button
              v-if="!scope.row.isAdd"
              icon="el-icon-delete"
              style="color: #f56c6c"
              type="text"
              @click="delSeries(scope.row)"
            >{{ $t('delete') }}</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <el-dialog
      :title="series.keyName"
      :visible.sync="dialogDictionariesVisible"
    >
      <dictionaries-model v-if="dialogDictionariesVisible" :product-id="series.productId" template-type="series" :key-name="series.keyName" />
    </el-dialog>

  </div>
</template>

<script>
import {
  failureNotice,
  successNotice,
  cancelNotice
} from '@/util/common'
import {
  insertSeries,
  deleteSeries,
  updateSeries,
  getSeriesList
} from '@/api/iot/iotProductSeriesApi'
import DictionariesModel from '../DictionariesModel'
import { getUserId } from '@/util/storage'
export default {
  name: 'ProductSeries',
  components: {
    DictionariesModel
  },
  props: {
    productId: {
      type: Number,
      default: null
    }
  },
  data() {
    return {
      series: {},
      seriesList: [],
      dialogDictionariesVisible: false
    }
  },
  created() {
    this.getSeriesList()
  },
  methods: {
    dictionaries(item) {
      this.series = item
      this.dialogDictionariesVisible = true
    },
    getSeriesList() {
      getSeriesList({
        productId: this.productId
      }).then(res => {
        const { code, data } = res
        if (code === '200') {
          this.seriesList = data
        } else if (code === '201') {
          this.seriesList = []
        } else {
          this.seriesList = []
          failureNotice(this)
        }
      })
    },
    addSeries() {
      for (let i = 0, j = this.seriesList.length; i < j; i++) {
        if (this.seriesList[i].isAdd) {
          return
        }
      }
      const item = {
        keyName: '',
        name: '',
        viewSign: '',
        productId: this.productId,
        isAdd: true
      }
      this.seriesList.push(item)
    },
    addOrUpdateProductSeries(item) {
      const json = {
        userId: getUserId(),
        keyName: item.keyName,
        name: item.name,
        viewSign: item.viewSign,
        productId: this.productId,
        remark: item.seriesDesc
      }

      if (item.isAdd) {
        insertSeries(json).then(res => {
          const { code } = res
          if (code === '200') {
            successNotice(this)
            this.getSeriesList()
          }
        })
      } else {
        json.seriesId = item.seriesId
        updateSeries(json).then(res => {
          const { code } = res
          if (code === '200') {
            successNotice(this)
            that.getSeriesList()
          }
        })
      }
    },
    delSeries(item) {
      const that = this
      this.$confirm(this.$t('delete') + item.keyName, this.$t('prompt'), {
        confirmButtonText: this.$t('confirm'),
        cancelButtonText: this.$t('cancel'),
        type: 'warning'
      })
        .then(function() {
          deleteSeries({
            seriesId: item.seriesId
          }).then(res => {
            const { code, data } = res
            if (code === '200') {
              successNotice(that)
              that.getSeriesList()
            }
          })
        })
        .catch(function() {
          cancelNotice(that)
        })
    }
  }
}
</script>
